import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, Form, Input, InputNumber, message, Modal, Row, Select} from 'antd';
import CurrencySelect from '../../common/CurrencySelect';

const dateFormat = 'YYYY-MM-DD';
const FormItem = Form.Item;
const R = require("ramda");


const incidentalsDetail = Form.create()(class IncidentalsDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: false
        }
    }

    handleOpen = (disabled) => {
        this.setState({ open: true, disabled });
    }

    handleCancel = () => {
        this.setState({ open: false });
        this.props.form.resetFields();
    }

    handleConfirm = () => {
        let feeSingle = this.props.form.getFieldValue("feeSingle");
        let isSingle = this.props.form.getFieldValue("isSingle");

        let fee20gp = this.props.form.getFieldValue("fee20gp");
        let fee40gp = this.props.form.getFieldValue("fee40gp");
        let fee40hq = this.props.form.getFieldValue("fee40hq");

        if(R.equals(isSingle, "1")){
            if(feeSingle <= 0){
                this.props.form.setFields({
                    feeSingle: {
                        value: feeSingle,
                        errors: [new Error('单票费用需大于0')],
                    },
                });
                return;
            }
        }else{
            let fee20gpFlg = R.isNil(fee20gp) || fee20gp <=0  ? true : false;
            let fee40gpFlg = R.isNil(fee40gp) || fee40gp <=0  ? true : false;
            let fee40hqFlg = R.isNil(fee40hq) || fee40hq <=0  ? true : false;

            if(fee20gpFlg && fee40gpFlg && fee40hqFlg){
                message.error("柜号费用最少一项不为0");
                return;
            }


        }

        this.props.form.validateFields({ force: true }, (errors, values) => {
            if (errors) return;
            values.id = this.props.incidentals.dataSource && this.props.incidentals.dataSource.id ? this.props.incidentals.dataSource.id : null;

            if (!R.equals(R.pick(Object.keys(values), this.props.incidentals.dataSource), values)) {
                this.props.dispatch({
                    type: R.isNil(values.id) ? 'incidentals/addIncidentals' : 'incidentals/updateIncidentals',
                    payload: {
                        ...values,
                        onSuccess: () => {
                            this.handleCancel();
                            if (this.props.refreshList) this.props.refreshList();
                        }
                    }
                })
            } else this.handleCancel();
        });
    }


    handleSingle = (value) =>{
        let isSingle = this.props.form.getFieldValue("isSingle");
        let dataSource = this.props.incidentals.dataSource ? this.props.incidentals.dataSource : {};
        dataSource.isSingle = value;

        if(!R.isNil(isSingle)){

            if(isSingle == 1){
                this.props.form.setFieldsValue({feeSingle: null});
            }else{
                this.props.form.setFieldsValue({fee20gp: null});
                this.props.form.setFieldsValue({fee40gp: null});
                this.props.form.setFieldsValue({fee40hq: null});
            }

        }
    }

    render() {
        let dataSource = this.props.incidentals.dataSource ? this.props.incidentals.dataSource : {};
        let formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };


        const { getFieldDecorator } = this.props.form;
        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];

        return (
            <Modal maskClosable={false} visible={this.state.open} width={850} title={"杂费详情"}
                   confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={footer}>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="费用代码" hasFeedback>
                                {getFieldDecorator('feeCode', {
                                    rules: [{
                                        required: true, message: '请输入费用代码',
                                    }],
                                    initialValue: dataSource.feeCode
                                })(
                                    <Input disabled={this.state.disabled} maxLength="20" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="费用名称" hasFeedback>
                                {getFieldDecorator('feeName', {
                                    rules: [{
                                        required: true, message: '请输入费用名称',
                                    }],
                                    initialValue: dataSource.feeName
                                })(
                                    <Input disabled={this.state.disabled} maxLength="100" />
                                )}
                            </FormItem>
                        </Col>

                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="费用英文名称" hasFeedback>
                                {getFieldDecorator('feeNameEn', {
                                    rules: [{
                                        required: false, message: '请输入费用英文名称',
                                    }],
                                    initialValue: dataSource.feeNameEn
                                })(
                                    <Input disabled={this.state.disabled} maxLength="100" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="费用类型" hasFeedback>
                                {getFieldDecorator('feeType', {
                                    rules: [{
                                        required: true, message: '请输入费用类型',
                                    }],
                                    initialValue: dataSource.feeType
                                })(
                                    <Select disabled={this.state.disabled} >
                                        <Select.Option value="1">报关杂费</Select.Option>
                                        <Select.Option value="2">拖车杂费</Select.Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="是否单票" hasFeedback>
                                {getFieldDecorator('isSingle', {
                                    rules: [{
                                        required: true, message: '请输入是否单票',
                                    }],
                                    initialValue: dataSource.isSingle
                                })(
                                    <Select disabled={this.state.disabled}  onChange={this.handleSingle.bind(this)}>
                                        <Select.Option value="0">否</Select.Option>
                                        <Select.Option value="1">是</Select.Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="币种" hasFeedback>
                                {getFieldDecorator('currency', {
                                    rules: [{
                                        required: true, message: '请输入币种',
                                    }],
                                    initialValue: dataSource.currency
                                })(
                                    <CurrencySelect disabled={this.state.disabled} />
                                )}
                            </FormItem>
                        </Col>

                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="20GP费用" hasFeedback>
                                {getFieldDecorator('fee20gp', {
                                    rules: [{
                                        required: false, message: '请输入20GP费用',
                                    }],
                                    initialValue: dataSource.fee20gp
                                })(
                                    <InputNumber max={99999999999999} style={{width : '100%'}} disabled={R.equals(dataSource.isSingle, '1' ) ? true : this.state.disabled} />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="40GP费用" hasFeedback>
                                {getFieldDecorator('fee40gp', {
                                    rules: [{
                                        required: false, message: '请输入40GP费用',
                                    }],
                                    initialValue: dataSource.fee40gp
                                })(
                                    <InputNumber max={99999999999999} style={{width : '100%'}} disabled={R.equals(dataSource.isSingle, '1') ? true : this.state.disabled} />
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="40HQ费用" hasFeedback>
                                {getFieldDecorator('fee40hq', {
                                    rules: [{
                                        required: false, message: '请输入40HQ费用',
                                    }],
                                    initialValue:dataSource.fee40hq
                                })(
                                    <InputNumber max={99999999999999} style={{width : '100%'}} disabled={R.equals(dataSource.isSingle, '1') ? true : this.state.disabled} />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="单票费用" hasFeedback>
                                {getFieldDecorator('feeSingle', {
                                    rules: [{
                                        required: false, message: '请输入单票费用',
                                    }],
                                    initialValue: dataSource.feeSingle
                                })(
                                    <InputNumber max={99999999999999} style={{width : '100%'}} disabled={R.equals(dataSource.isSingle, '0') ? true : this.state.disabled} />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="备注" hasFeedback>
                                {getFieldDecorator('memo', {
                                    rules: [{
                                        required: false, message: '请输入备注',
                                    }],
                                    initialValue: dataSource.memo
                                })(
                                    <Input.TextArea disabled={this.state.disabled} maxLength="300" autosize={true} />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Modal >
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.incidentals, incidentals: state.incidentals, supplier: state.supplier
    };
}

export default connect(mapStateToProps)(incidentalsDetail);